<template>
    <div>
    <el-row :gutter="10">
      <el-col :sm="17" :lg="17">
        <el-form :model="queryDefenceArea" label-position="right" inline ref="queryRef" v-show="showSearch"
          @submit.prevent>
          <el-form-item label="横向位置：" prop="defence_x">
            <el-input v-model="queryDefenceArea.defence_x" placeholder="横向" clearable style="width: 100px" />
          </el-form-item>

          <el-form-item label="纵向位置：" prop="defence_y">
            <el-input v-model="queryDefenceArea.defence_y" placeholder="纵向" clearable style="width: 100px" />
          </el-form-item>

          <el-form-item label="探测半径：" prop="defenceareaId">
            <el-input v-model="queryDefenceArea.defenceRadius" placeholder="半径" clearable style="width: 100px" />
          </el-form-item>

          <el-form-item label="旋转角度：" prop="defenceareaId">
            <el-input v-model="queryDefenceArea.defence_x" placeholder="角度" clearable style="width: 100px" />
          </el-form-item>

          <br>
          <el-form-item>
            <el-button size="mini" :type="isDrawing ? 'warning' : 'primary'" @click="startDraw">绘制区域</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="danger">全部清除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="success" @click="savePoints">保存</el-button>
          </el-form-item>

        </el-form>


        <div class="div-canvas">
          <canvas id="imgCanvas" ref="canvaxbox"></canvas>
          <canvas id="pointCanvas" ref="pointCanvas" class="pointCanvas"></canvas>
          <canvas id="radarCanvas" ref="radarCanvas"></canvas>
        </div>
      </el-col>

      <el-col :sm="7" :lg="7">
        <div style="float: left; width: 100%;height: 30%;background-color: aliceblue;">
          <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch"
            @submit.prevent>
            <el-form-item label="防区" prop="defenceareaId">
              <el-select v-model="queryParams.defenceareaId" clearable>
                <el-option v-for="dict in defenceareaOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button icon="search" type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="dataList" v-loading="loading" ref="table" border
            header-cell-class-name="el-table-header-cell" highlight-current-row @sort-change="sortChange"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column prop="id" label="id" width="50" align="center" :show-overflow-tooltip="true" />
            <el-table-column prop="ip" label="IP" align="center" :show-overflow-tooltip="true" />
            <el-table-column prop="x" label="X" width="50" align="center" />
            <el-table-column prop="y" label="Y" width="50" align="center" />
            <el-table-column label="预览" width="60" align="center">
              <template #default="scope">
                <a @click="showCamera(scope.row)">预览</a>
              </template>
            </el-table-column>

          </el-table>
          <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
            @pagination="getList" />


        </div>
        <div style="float: left; width: 100%;height: 20%;background-color: antiquewhite;">
          <div><br>
            <PTZ @childEvent="handleChildEvent" />

          </div>

        </div>

        <div class="tool-box">
          <el-button size="mini" type="primary" @click="stopTarget()">{{ !setTrack.status ? '开始跟踪' : '结束跟踪'
          }}</el-button><br>
          <br>
          <el-input v-model="jz" style="width: 100px;"></el-input>米(M)
          <el-button size="mini" type="success" @click="AddCalibration">校准</el-button>
        </div>

        <div style="float: left; width: 100%;height: 30%;background-color:brown;">55
        </div>
      </el-col>
    </el-row>


  </div>
</template>


<script setup>

// import { addCalibration, getCalibration, setCalibrationTrack, addDrawPolygon, } from '@/api/device/calibration'
// import PTZ from '@/views/components/ptz/PTZ'
// import { sendPTZ } from '@/api/ptz/ptz'
// import { listCamera, } from '@/api/device/camera'
// import { allDefencearea, getDefencearea, } from '@/api/device/defencearea.js'
import { ElMessageBox } from 'element-plus'


const defenceareaRef = ref([])
const camerasRef = ref([])
const radarsRef = ref([])
const picMap = ref()
const defenceareaOptions = ref([])
const state = reactive({
  form: {},
  draw_form: {},
})

const { form, draw_form } = toRefs(state)

const total = ref(0)
const dataList = ref([])
const queryRef = ref()

const setTrack = reactive({
  status: true,
})
const ids = ref([])
const loading = ref(false)

const queryParams = reactive({
  defenceareaId: undefined,
})

const queryDefenceArea = ref({
  defenceRadius: 0,
  defence_x: 0,
  defence_y: 0,

  radar_x: 0,
  radar_y: 0,
})

const jz = ref('30');

function AddCalibration() {
  if (ids.value[0] == undefined) {
    ElMessageBox.alert('请选择一个相机!', '云台控制', { type: 'error' });
    return;
  }
  form.value = {
    CameraIp: ids.value[0],
    DefenceareaId: 2,
    CalibrationDistance: jz,
    CameraPointX: 0,
    CameraPointY: 0,
    CameraHeight: 2,
    CamerarPointAngle: 0
  };

  addCalibration(form.value).then((res) => {
    // proxy.$modal.msgSuccess("新增成功")
    // open.value = false
    //getList()
    ElMessageBox.alert('校准成功', '校准', { type: 'success' });
  })
}

function stopTarget() {
  setCalibrationTrack(setTrack.status).then(res => {
    const { code, data } = res
    if (code == 200) {
      if (setTrack.status)
        setTrack.status = false;
      else
        setTrack.status = true;
    }
  })
}

function handleChildEvent(data) {

  if (ids.value[0] == undefined) {

    ElMessageBox.alert('请选择一个相机!', '云台控制', { type: 'error' });
  }

  sendPTZ(data, ids.value[0]).then((res) => {
    const { code, data } = res
    if (code == 200) {

    }
  })
  //alert('来自子组件的数据:' + data);
}

function handall() {
  allDefencearea().then((response) => {
    defenceareaOptions.value = response.data
    queryParams.defenceareaId = response.data[0].id;
    handleQuery();
  })
}

// 查询
function handleQuery() {
  queryParams.pageNum = 1
  getList();

  if (queryParams.defenceareaId != undefined) {
    getDefencearea(queryParams.defenceareaId).then((response) => {
      defenceareaRef.value = response.data.defencearea;
      camerasRef.value = response.data.cameras
      radarsRef.value = response.data.radars
      picMap.value = response.data.picMap

      queryDefenceArea.defenceRadius = defenceareaRef.value.defenceRadius;
      queryDefenceArea.defence_x = defenceareaRef.value.posX;
      queryDefenceArea.defence_y = defenceareaRef.value.posY;

      initPoints();
      initImgCanvas();
      tt();

    })
  }
}



function getList() {
  //loading.value = true
  listCamera(queryParams).then(res => {
    const { code, data } = res
    if (code == 200) {
      dataList.value = data.result
      total.value = data.totalNum
      loading.value = false
    }
  })
}












</script>
<style lang="scss" scoped>
.div-canvas {
  width: 100vm;
  height: 100vh;
  //margin: 0px auto;
  background-color: #fffbfb2a; //#fff;
  //border: 3px;
  border-color: rgb(252, 248, 6);
  position: relative;
  background-color: aquamarine;
  overflow: hidden;
}

#imgCanvas,
#pointCanvas,
#radarCanvas {
  background: rgba(238, 23, 238, 0);
  position: absolute;
  //   top: 50%;
  //   left: 30%;
  //   transform: translate(-50%, -50%);
  // border: 1px solid rgba(151, 177, 35, 0.185);
}

// .imgCanvas {
//   z-index: 0;
// }
.pointCanvas {
  z-index: 2;
}

// .saveCanvas {
//   z-index: 3;
// }
.tool-box {
  float: left;
  width: 100%;
  height: 30%;
  //   padding: 5px 10px;
  //   margin: 20px auto 0;
  box-sizing: border-box;
  text-align: left;
  background-color: aliceblue;
}
</style>